<template>
  <div class="HomeView">
    <top search="1" more="1">
      <template v-slot:df="scope">
        <div>
          <!-- ### 看板和公告 ok -->
          <swiper observer :space-between="5" :centeredSlides="true" :slidesPerView="'auto'" :loop="true"
            :autoplay="{ delay: 3000, disableOnInteraction: false }" :modules="[Autoplay]">
            <swiper-slide class="heights">
              <img :src="film1" style="width: 100%;height: 100%;" alt="" @click="todetail(3)">
            </swiper-slide>
            <swiper-slide class="heights">
              <img :src="film2" style="width: 100%;height: 100%;" alt="" @click="todetail(3)">
            </swiper-slide>
            <swiper-slide class="heights">
              <img :src="film3" style="width: 100%;height: 100%;" alt="" @click="todetail(3)">
            </swiper-slide>
            <swiper-slide class="heights">
              <img :src="film1" style="width: 100%;height: 100%;" alt="" @click="todetail(3)">
            </swiper-slide>
            <swiper-slide class="heights">
              <img :src="film2" style="width: 100%;height: 100%;" alt="" @click="todetail(3)">
            </swiper-slide>
          </swiper>
          <div style="border-bottom: .0075rem solid #f9e7cd;">
            <van-notice-bar left-icon="volume-o" :scrollable="false" class="notice-swipe">
              <van-swipe vertical class="notice-swipe notice-pad" :autoplay="3000" :touchable="false"
                :show-indicators="false">
                <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
                <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
                <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
              </van-swipe>
            </van-notice-bar>
          </div>
          <!-- ### 服务 ok -->
          <!-- <div style="padding:0 .3rem;background-color: #dce0f1;"> -->
          <van-grid square icon-size=".8rem">
            <van-grid-item :key="value" icon="apps-o" text="分类" @click="topages('/itemlist')" />
            <van-grid-item :key="value" icon="calendar-o" text="活动日历" />
            <van-grid-item :key="value" icon="star-o" text="我的收藏" />
            <van-grid-item :key="value" icon="balance-list-o" text="我的订单" />
            <!-- <van-grid-item v-for="value in 8" :key="value" :icon="shopcar" text="文字" /> -->
          </van-grid>
          <!-- </div> -->
          <!-- ### 今日特惠 ok -->
          <div class="smalltitle">
            <span class="smalltitle-left"></span> 今日特惠
          </div>
          <div>
            <div class="atvty-show-left">
              <div class="atvty-show-leftin">
                <img src="../assets/20230517164305.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
              </div>
            </div>
            <div class="atvty-show-right">
              <div class="atvty-show-rightin">
                <img src="../assets/20230517164415.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
              </div>
              <div class="atvty-show-rightin">
                <img src="../assets/20230517164605.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
              </div>
            </div>
            <div style="clear: both;"></div>
          </div>
          <!-- ### 猜您喜欢 -->
          <div class="smalltitle">
            <span class="smalltitle-left"></span> 猜您喜欢
          </div>
          <div>
            <van-card v-for="v in 3" :num="'1 (张)'" price="2.00" origin-price="10.00" desc="描述信息" title="商品标题"
              :thumb="shopitem" @click="todetail(3)">
              <template v-slot:price="scope">
                ￥2.00-3.00
              </template>
            </van-card>
          </div>
        </div>
      </template>
    </top>
  </div>
</template>

<script lang="ts" setup>
import { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue';//选项api要注册组件对象
import 'swiper/css';
import 'swiper/css/autoplay';
//图片资源
import shopcar from '../assets/shop-car.png'
import film1 from '../assets/20230517154820.png'
import film2 from '../assets/20230517154909.png'
import film3 from '../assets/20230517154948.png'
import shopitem from '../assets/20230517164305.png'

import { useRouter } from 'vue-router';

const router = useRouter()
const topages = (link) => {
  router.push({ path: link })
}
const todetail: Function = (id: any) => {
  router.push({ path: '/detail', query: { id } })
}
</script>

<style scoped>
.heights {
  width: 80%;
  height: 300px;
  background-color: chocolate;
}

.notice-swipe {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
}

.notice-pad {
  padding: 0 15px;
}

.smalltitle {
  padding: 20px;
  /* background-color: #fff3e2; */
  background-color: #eee;
  color: #e45454;
  font-weight: 800;
}

.smalltitle-left {
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 20px;
  background-color: #e45454;
}

.atvty-show-left,
.atvty-show-right {
  float: left;
  width: 50%;
  height: 601px;
}

.atvty-show-leftin {
  height: 601px;
  border-right: 1px solid white;
  background-color: #e1e1e1;
}

.atvty-show-rightin {
  height: 300px;
  border-bottom: 1px solid white;
  background-color: #e1e1e1;
}
</style>